<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8" %>
<!-- 新增商品页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增商品</title>
    <link rel="stylesheet" type="text/css" href="../../css/create.css">
    <script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../js/validation.js"></script>
    <script type="text/javascript">
        $(function () {
            /*根据一级分类的改变，使用ajax获取二级分类，同时添加到二级分类选项列表*/
            $("#first_cid").on("change", function () {
                var firstId = $(this).val();
                $.ajax({
                    url: "management?method=gsecond",
                    type: "get",
                    data: {"id": firstId},
                    dataType: "json",
                    success: function (json) {
                        console.log(json);
                        //移除所有second_cid下的原始option选项
                        $("#second_cid>option").remove();
                        $("#second_cid").append("<option value='-1'>请选择二级分类</option>");
                        for (var i = 0; i < json.length; i++) {
                            var ch = json[i];
                            $("#second_cid").append("<option value='" + ch.second_cid + "'>" + ch.second_cname + "</option>");
                        }
                    }
                })
            })
        })

        /*表单提交校验，当所有校验全部通过时才返回true*/
        function checkSubmit() {
            //var result = true;
            var r1 = checkEmpty('#goods_name', '#errGname');
            var r2 = checkCategory('#first_cid', '#errFirstCategory');
            var r3 = checkCategory('#second_cid', '#errSecondCategory');
            var r4 = checkTimeEmpty('#start_time', '#errStartTime');
            var r5 = checkTimeEmpty('#end_time', '#errEndTime');
            var r6 = checkPrice('#low_price', '#errLowPrice');
            var r7 = checkPrice('#price_markup', '#errMarkup');
            var r8 = checkPrice('#appraisal_price', '#errAppraisal');
            var r9 = checkFile('#goods_picture', '#errImage');
            var r10 = checkEmpty('#goods_desc', '#errDescription');
            if (r1 && r2 && r3 && r4 && r5 && r6 && r7 && r8 && r9 && r10) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
<div class="container">
    <fieldset>
        <legend>新增商品</legend>
        <form action="/management?method=gcreate" method="post"
              autocomplete="off" enctype="multipart/form-data" onsubmit="return checkSubmit()">
            <ul class="ulform">
                <li>
                    <span>商品名称</span>
                    <span id="errGname"></span>
                    <input id="goods_name" name="goods_name" onblur="checkEmpty('#goods_name','#errGname')"/>
                </li>
                <li>
                    <span>一级分类</span>
                    <span id="errFirstCategory"></span>
                    <select id="first_cid" name="first_cid" onchange="checkCategory('#first_cid','#errFirstCategory')">
                        <option value="-1">请选择一级分类</option>
                        <c:forEach items="${firstCategory}" var="first">
                            <option value="${first.first_cid}">${first.first_cname}</option>
                        </c:forEach>
                    </select>
                </li>
                <li>
                    <span>二级分类</span>
                    <span id="errSecondCategory"></span>
                    <select id="second_cid" name="second_cid" onchange="checkCategory('#second_cid','#errSecondCategory')">
                        <option value="-1">请选择二级分类</option>
                    </select>
                </li>
                <li>
                    <span>开始时间</span>
                    <span id="errStartTime"></span>
                    <input type="datetime-local" id="start_time" name="start_time"
                           onblur="checkTimeEmpty('#start_time','#errStartTime')"/>
                </li>
                <li>
                    <span>结束时间</span>
                    <span id="errEndTime"></span>
                    <input type="datetime-local" id="end_time" name="end_time"
                           onblur="checkTimeEmpty('#end_time','#errEndTime')"/>
                </li>
                <li>
                    <span>起拍价</span>
                    <span id="errLowPrice"></span>
                    <input id="low_price" name="low_price" onblur="checkPrice('#low_price','#errLowPrice')"/>
                </li>
                <li>
                    <span>加价幅度</span>
                    <span id="errMarkup"></span>
                    <input id="price_markup" name="price_markup" onblur="checkPrice('#price_markup','#errMarkup')"/>
                </li>
                <li>
                    <span>评估价</span>
                    <span id="errAppraisal"></span>
                    <input id="appraisal_price" name="appraisal_price" onblur="checkPrice('#appraisal_price','#errAppraisal')"/>
                </li>
                <li>
                    <span>商品预览</span>
                    <span id="errImage"></span>
                    <input id="goods_picture" name="goods_picture" type="file"
                           style="padding-left: 0px;" accept="image/*" onchange="checkFile('#goods_picture','#errImage')"/>
                </li>

                <li>
                    <span>商品描述</span>
                    <span id="errDescription"></span>
                    <textarea
                            id="goods_desc" name="goods_desc"
                            onblur="checkEmpty('#goods_desc','#errDescription')"></textarea>
                </li>
                <li style="text-align: center;">
                    <button type="submit" class="btn-button">提交表单</button>
                </li>
            </ul>
        </form>
    </fieldset>
</div>

</body>
</html>
